<template>
  <view class="container">
    <view class="header">
      <text class="title">门店运营综合数据</text>
    </view>

    <view class="filters">
      <uni-data-select v-model="value" :localdata="range" @change="change" />
      <uni-datetime-picker v-model="datetimerange" type="date" />
    </view>

    <view class="section">
      <text class="section-title">携程：门店运营数据表</text>
      <scroll-view scroll-x="true" class="table-container">
        <view class="table">
          <view class="table-header">
            <view v-for="(item, index) in fun_list_xc" :key="index" class="table-cell" :style="{width: item.width}">
              {{item.title}}
            </view>
          </view>
          <view v-for="(items, indexs) in data_list_xc" :key="indexs" class="table-row" :style="{backgroundColor: backgrounds[indexs%2]}">
            <view v-for="(item, index) in items" :key="index" class="table-cell" :style="{width: item.width}">
              <text v-if="item.type=='1'">{{item.title}}</text>
              <view v-if="item.type=='2'" class="progress-bar" :style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
                {{item.content.toFixed(2)}}%
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="section">
      <text class="section-title">美团：门店运营数据表</text>
      <scroll-view scroll-x="true" class="table-container">
        <view class="table">
          <view class="table-header">
            <view v-for="(item, index) in fun_list_mt" :key="index" class="table-cell" :style="{width: item.width}">
              {{item.title}}
            </view>
          </view>
          <view v-for="(items, indexs) in data_list_mt" :key="indexs" class="table-row" :style="{backgroundColor: backgrounds[indexs%2]}">
            <view v-for="(item, index) in items" :key="index" class="table-cell" :style="{width: item.width}">
              <text v-if="item.type=='1'">{{item.title}}</text>
              <view v-if="item.type=='2'" class="progress-bar" :style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
                {{item.content.toFixed(2)}}%
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="section">
      <text class="section-title">抖音：门店运营数据表</text>
      <scroll-view scroll-x="true" class="table-container">
        <view class="table">
          <view class="table-header">
            <view v-for="(item, index) in fun_list_dy" :key="index" class="table-cell" :style="{width: item.width}">
              {{item.title}}
            </view>
          </view>
          <view v-for="(items, indexs) in data_list_dy" :key="indexs" class="table-row" :style="{backgroundColor: backgrounds[indexs%2]}">
            <view v-for="(item, index) in items" :key="index" class="table-cell" :style="{width: item.width}">
              <text v-if="item.type=='1'">{{item.title}}</text>
              <view v-if="item.type=='2'" class="progress-bar" :style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
                {{item.content.toFixed(2)}}%
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				jd_color: ["#4B98FE", "#00D05E", "#957BFE", "#FE871B", "#00C8B0",
					"#F674D6"
				],
				backgrounds: ['rgba(89,126,155,1)', 'rgba(84,120,154,1)'],
				no_jd:11,
				single: '',
				activeUrl: '',
				
				localMenus: [{
					menu_id: "demo",
					text: '运营数据',
					icon: 'uni-icons-list',
					value: "",
					children: [{
						menu_id: "icons",
						text: '流量概述',
						icon: '',
						value: '/pages/demo/icons/icons',
					}, {
						menu_id: "table",
						text: '服务概述',
						icon: '',
						value: '/pages/demo/table/table',
					}, {
						menu_id: "table",
						text: '收益概览',
						icon: '',
						value: '/pages/demo/table/table',
					}]
				}],
				fun_list_dy: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: 'HOS分',
					width: '80px'
				}, {
					title: '销售间夜',
					width: '120px'
				}, {
					title: '销售均价',
					width: '120px'
				},{
					title: '销售额',
					width: '120px'
				},{
					title: '入住间夜',
					width: '120px'
				},{
					title: '曝光人数',
					width: '120px'
				},{
					title: '浏览人数',
					width: '120px'
				},{
					title: '支付订单数',
					width: '120px'
				},{
					title: '曝光-浏览转化率',
					width: '120px'
				},{
					title: '浏览-支付转化率',
					width: '120px'
				},{
					title: '成交转化率',
					width: '120px'
				}],
				fun_list_mt: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: '门店页访问人数',
					width: '120px'
				}, {
					title: '交易金额',
					width: '120px'
				}, {
					title: '核销金额',
					width: '120px'
				},{
					title: '退款金额',
					width: '120px'
				},{
					title: '客单价',
					width: '120px'
				},{
					title: '商品点击人数',
					width: '120px'
				},{
					title: '核销券数',
					width: '120px'
				},{
					title: '成交券数',
					width: '120px'
				},{
					title: '播放量',
					width: '120px'
				},{
					title: '5S完播率',
					width: '120px'
				},{
					title: '2S跳出率',
					width: '120px'
				}],
				fun_list_xc: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: '实时预定订单',
					width: '120px'
				}, {
					title: '实时在店间夜',
					width: '120px'
				}, {
					title: '昨日离店销售额',
					width: '120px'
				},{
					title: '昨日离店间夜量',
					width: '120px'
				},{
					title: '昨日平均卖价',
					width: '120px'
				},{
					title: '实时访客量',
					width: '120px'
				},{
					title: '曝光转化率',
					width: '120px'
				},{
					title: '下单转化率',
					width: '120px'
				},{
					title: '成交转化率',
					width: '120px'
				},{
					title: 'PSI服务质量分',
					width: '120px'
				},{
					title: '成交转化率',
					width: '120px'
				},{
					title: '5分钟回复率',
					width: '120px'
				}],
				data_list_xc: [
					[{
						width: '200px',
						type: '1',
						title: '话题民宿（昆明机场店）',
						content: '话题民宿（昆明机场店）'
					}, {
						type: '1',
						title: '0',
						content: '0',
						width: '120px'
					}, {
						type: '1',
						title: '0',
						content: '0',
						width: '120px'
					}, {
						type: '1',
						title: '0',
						content: '0',
						width: '120px'
					}, {
						type: '1',
						title: '0',
						content: '0',
						width: '120px'
					}, {
						type: '1',
						title: '0',
						content: '0',
						width: '120px'
					}, {
						type: '1',
						title: '19',
						content: '19',
						width: '120px'
					}, {
						type: '1',
						title: '381',
						content: '381',
						width: '120px'
					}, {
						type: '2',
						title: 11.46,
						content: 11.46,
						width: '120px'
					}, {
						type: '2',
						title: 4.55,
						content: 4.55,
						width: '120px'
					}, {
						type: '2',
						title: 0.00,
						content: 0.00,
						width: '120px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '120px'
					}, {
						type: '1',
						title: 3.84,
						content: 3.84,
						width: '120px'
					}],[{
						width: '200px',
						type: '1',
						title: '话题酒店（江岸店）',
						content: '话题酒店（江岸店）'
					}, {
						type: '1',
						title: '4',
						content: '4',
						width: '120px'
					}, {
						type: '1',
						title: '18',
						content: '18',
						width: '120px'
					}, {
						type: '1',
						title: '2637',
						content: '2637',
						width: '120px'
					}, {
						type: '1',
						title: '15',
						content: '15',
						width: '120px'
					}, {
						type: '1',
						title: '175.8',
						content: '175.8',
						width: '120px'
					}, {
						type: '1',
						title: '13',
						content: '13',
						width: '120px'
					}, {
						type: '1',
						title: '281',
						content: '281',
						width: '120px'
					}, {
						type: '2',
						title: 10.97,
						content: 10.97,
						width: '120px'
					}, {
						type: '2',
						title: 12.68,
						content: 12.68,
						width: '120px'
					}, {
						type: '2',
						title: 77.78,
						content: 77.78,
						width: '120px'
					}, {
						type: '1',
						title: '7',
						content: '7',
						width: '120px'
					}, {
						type: '1',
						title: 5.53,
						content: 5.53,
						width: '120px'
					}]
				],
				data_list_mt: [
					[{
						width: '200px',
						type: '1',
						title: '话题酒店（江岸店）',
						content: '话题酒店（江岸店）'
					}, {
						type: '1',
						title: '118',
						content: '118',
						width: '120px'
					}, {
						type: '1',
						title: '577',
						content: '577',
						width: '120px'
					}, {
						type: '1',
						title: '696.50',
						content: '696.50',
						width: '120px'
					}, {
						type: '1',
						title: '935.00',
						content: '935.00',
						width: '120px'
					}, {
						type: '1',
						title: '217.17',
						content: '217.17',
						width: '120px'
					}, {
						type: '1',
						title: '82',
						content: '82',
						width: '120px'
					}, {
						type: '1',
						title: '4',
						content: '4',
						width: '120px'
					}, {
						type: '1',
						title: 4,
						content: 4,
						width: '120px'
					}, {
						type: '1',
						title: 5851,
						content: 5851,
						width: '120px'
					}, {
						type: '2',
						title: 0.00,
						content: 0.00,
						width: '120px'
					}, {
						type: '1',
						title: '12',
						content: '12',
						width: '120px'
					}, {
						type: '1',
						title: 84,
						content: 84,
						width: '120px'
					}]
				],
				data_list_dy: [
					[{
						width: '200px',
						type: '1',
						title: '话题酒店（江岸店）',
						content: '话题酒店（江岸店）'
					}, {
						type: '1',
						title: '2.9',
						content: '2.9',
						width: '80px'
					}, {
						type: '1',
						title: '9',
						content: '9',
						width: '120px'
					}, {
						type: '1',
						title: '203.22',
						content: '203.22',
						width: '120px'
					}, {
						type: '1',
						title: '1829.00',
						content: '1829.00',
						width: '120px'
					}, {
						type: '1',
						title: '3',
						content: '3',
						width: '120px'
					}, {
						type: '1',
						title: '294',
						content: '294',
						width: '120px'
					}, {
						type: '1',
						title: '28',
						content: '28',
						width: '120px'
					}, {
						type: '1',
						title: 5,
						content: 5,
						width: '120px'
					}, {
						type: '2',
						title: 9.36,
						content: 9.36,
						width: '120px'
					}, {
						type: '2',
						title: 17.86,
						content: 17.86,
						width: '120px'
					}]
				],
				value: 0,
				range: [{
						value: 0,
						text: "集团数据"
					},
					{
						value: 1,
						text: "大长航酒店"
					},
					{
						value: 2,
						text: "话题酒店（昆明翠湖店）"
					}, {
						value: 3,
						text: '话题民宿'
					},
				],
				date: '2023-07',
				weeek_data: {
					categories: ["携程", "美团", "抖音"],
					series: [{
							name: "实时曝光量",
							index: 1,
							type: "column",
							data: [205, 7, 2950]
						},
						{
							name: "实时排名",
							type: "line",
							color: "#2fc25b",
							data: [811, 6, 0]
						}
					]
				},
				week_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
				
					},
					yAxis: {
						disableGrid: true,
						
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "折线"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "柱状图",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
				rankChartData: {
					categories: [
						"09.05",
						"09.06",
					],
					series: [{
						name: "大长航酒店",
						data: [44.83],
						legendShape: "circle",
						color: "#4B98FE",
					}],
				},
				bgldata: {
					categories: [

						"09.05",
						"09.06",
					],
					series: [{
						name: "大长航酒店",
						data: [46.05],
						legendShape: "circle",
						color: "#4B98FE",
					}],
				},
				ssfkopts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [10, 10, 10, 10],
					dataLabel: false,
					xAxis: {

						disableGrid: true,
						fontColor: 'rgba(255,255,255,1)'
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disableGrid: false,
						gridType: 'dash',
						data: [{
							fontColor: 'rgba(255,255,255,1)',
							fontSize: 8,
						}],
						splitNumber: 3,
						dashLength: '4',

					},
					legend: {
						show: true,
						position: "top",
						float: "right",
						fontColor: 'rgba(255,255,255,1)'
					},
					extra: {
						line: {
							type: "curve",
							width: 4,
							activeType: 'solid'
						},
					},
				},
				rankopts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [10, 10, 10, 10],
					dataLabel: false,
					xAxis: {
						disabled: true,
						disableGrid: true,
						fontColor: 'rgba(255,255,255,1)'
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disableGrid: false,
						gridType: 'dash',
						data: [{
							fontColor: 'rgba(255,255,255,1)',
							fontSize: 8,
						}],
						splitNumber: 3,
						dashLength: '4',

					},
					legend: {
						show: true,
						position: "top",
						float: "right",
						fontColor: 'rgba(255,255,255,1)'
					},
					extra: {
						line: {
							type: "curve",
							width: 4,
							activeType: 'solid'
						},
					},
				},
				bglopts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [10, 10, 10, 10],
					dataLabel: false,
					xAxis: {
						disabled: true,
						disableGrid: true,
						fontColor: 'rgba(255,255,255,1)'
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disableGrid: false,
						gridType: 'dash',
						data: [{
							fontColor: 'rgba(255,255,255,1)',
							fontSize: 8,
						}],
						splitNumber: 3,
						dashLength: '4',

					},
					legend: {
						show: true,
						position: "top",
						float: "right",
						fontColor: 'rgba(255,255,255,1)'
					},
					extra: {
						line: {
							type: "curve",
							width: 4,
							activeType: 'solid'
						},
					},
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: rgba(12, 45, 88, 1);
	}
.container {
  background-color: rgba(12, 45, 88, 1);
  padding: 20rpx;
}

.header {
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.section {
  background-color: rgba(174, 200, 225, 0.1);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20rpx;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 200%;  /* Adjust based on your needs */
}

.table-header, .table-row {
  display: flex;
}

.table-cell {
  flex: 1;
  padding: 10rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-bar {
  height: 30rpx;
  border-radius: 15rpx;
  color: #ffffff;
  text-align: center;
  font-size: 24rpx;
  line-height: 30rpx;
}
</style>
